<template>
  <div class="userlist">
      <h1>用户列表</h1>
      <!-- 面包屑导航栏 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <!-- <el-breadcrumb-item>修改用户</el-breadcrumb-item> -->
      </el-breadcrumb> 
      <!-- 用户列表主体 -->
      <el-card>
        <el-row :gutter="20">
          <el-col :span="10">
            <!-- 搜索栏 -->
            <el-input placeholder="请输入用户名" v-model="queryDTO.keyword" clearable @clear="getAllUser">
              <el-button slot="append" icon="el-icon-search" @click="getAllUser"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
          </el-col>
        </el-row>
        <!-- 批量删除 -->
        <el-button type="danger" class="mdelete" :disabled="this.multipleSelection.length == 0" @click="batchDelete">批量删除</el-button> 
        <!-- 批量标记删除 -->
        <el-button type="warning" class="tagdelete" :disabled="this.multipleSelection.length == 0" @click="batchTagDelete">批量标记删除</el-button>
        <!-- 刷新 -->
        <el-button type="success" icon="el-icon-refresh" circle @click="refresh" :disabled="isDisable"></el-button>
        <!-- 用户列表 -->
        <el-table :data="userlist" border stripe @selection-change="handleSelectionChange">>
          <!-- 多选框 -->
          <el-table-column type="selection" width="55" fixed = "left"></el-table-column>
          <!-- 索引列 -->
          <el-table-column type="index" fixed = "left" label="序号"  width="55"></el-table-column>
          <!-- 用户ID -->
          <el-table-column prop="uid" label="用户ID" width="120" ></el-table-column>
          <!-- 用户名 -->
          <el-table-column prop="username" label="用户名" width="120" fixed></el-table-column>
          <!-- 昵称 -->
          <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
          <!-- 密码 -->
          <el-table-column prop="password" label="密码" width="80">
            <template slot-scope="scope">
              <!-- 重置 -->
              <el-tag type="danger" @click="resetpassword(scope.row)" >重置</el-tag>
            </template>
          </el-table-column>
          <!-- 邮箱状态 -->
          <el-table-column prop="verified" label="邮箱状态" width="150">
            <template slot-scope="scope">
              <!-- Tag标签 -->
              <el-tag type="success" v-if="scope.row.verified == true">激活</el-tag>
              <el-tag type="danger" v-else>未激活</el-tag>
              <!-- 修改按钮 -->
              &nbsp;<el-tag  class="el-icon-edit-outline" v-model="scope.row.verified" @click="setemailState(scope.row)"></el-tag >
            </template>
          </el-table-column>
          <!-- 账号状态 -->
          <el-table-column prop="state" label="账号状态" width="120">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.state == 0">正常</el-tag>
              <el-tag type="danger" v-else>封禁</el-tag>
              <!-- 修改按钮 -->
              &nbsp;<el-tag  class="el-icon-edit-outline" v-model="scope.row.state" @click="setState(scope.row)"></el-tag >
            </template>
          </el-table-column>
          <!-- 性别 -->
          <el-table-column prop="gender" label="性别" width="80">
            <template slot-scope="scope">
                <el-button type="info"  circle v-if="scope.row.gender == 0">密</el-button>
                <el-button type="primary"  circle v-else-if="scope.row.gender == 1">男</el-button>
                <el-button type="danger"  circle v-else-if="scope.row.gender == 2">女</el-button>
                <el-button type="warning"  circle v-else>空</el-button>
            </template>
          </el-table-column>
          <!-- 邮箱 -->
          <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
          
           <!--注册时间  -->
          <el-table-column prop="joinTime" label="注册时间" width="120">
              <template slot-scope="scope">
                    <div>{{scope.row.joinTime[0]}}-{{scope.row.joinTime[1]}}-{{scope.row.joinTime[2]}}</div>
              </template>
          </el-table-column>
          <!-- 经验值 -->
          <el-table-column prop="exp" label="经验值" width="120"></el-table-column>
          <!-- 个性签名 -->
          <el-table-column prop="sign" label="个性签名" width="120"></el-table-column>
          <!-- 信用值 -->
          <el-table-column prop="credit" label="信用值" width="120"></el-table-column>
          <!-- 生日 -->
          <el-table-column prop="birthday" label="生日" width="120">
            <template slot-scope="scope">
                <div>
                  {{scope.row.birthday[0]}}
                  -{{scope.row.birthday[1]}}
                  -{{scope.row.birthday[2]}}
                </div>
            </template>
          </el-table-column>
          <!-- 省份 -->
          <el-table-column prop="province" label="省份" width="120"></el-table-column>
          <!-- 城市 -->
          <el-table-column prop="city" label="城市" width="120"></el-table-column>
          <!-- 创建时间 -->
          <el-table-column prop="createdAt" label="创建时间" width="200">
            <template slot-scope="scope">
                <div>
                  {{scope.row.createdAt[0]}}
                  -{{scope.row.createdAt[1]}}
                  -{{scope.row.createdAt[2]}}
                  &nbsp;{{scope.row.createdAt[3]}}
                  :{{scope.row.createdAt[4]}}
                  :{{scope.row.createdAt[5]}}
                </div>
            </template>
          </el-table-column>
          <!-- 修改时间 -->
          <el-table-column prop="updatedAt" label="修改时间" width="200">
            <template slot-scope="scope">
                <div>
                  {{scope.row.updatedAt[0]}}
                  -{{scope.row.updatedAt[1]}}
                  -{{scope.row.updatedAt[2]}}
                  &nbsp;{{scope.row.updatedAt[3]}}
                  :{{scope.row.updatedAt[4]}}
                  :{{scope.row.updatedAt[5]}}
                </div>
            </template>
          </el-table-column>
          <!-- 操作  -->
          <el-table-column label="操作" width="200" fixed="right">
            <!--slot-scope="scope"-->
            <template slot-scope="scope">
                    <!-- 修改 -->
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="editUserInfo(scope.row)"></el-button>
                    <el-tooltip class="item" effect="dark" content="数据库删除" placement="top">
                        <!-- 数据库删除 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="标记删除" placement="top">
                       <!-- 标记删除 -->
                       <el-button type="warning" icon="el-icon-delete-solid" size="mini" @click="tagsdeleted(scope.row)"></el-button>
                    </el-tooltip>
                    
            </template>
	      </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div>
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryDTO.pageNo"
              :page-sizes="[5, 10, 20, 100]"
              :page-size="queryDTO.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
      <!-- 新增用户区域 -->
      <!-- 添加用户 -->
      <el-dialog title="添加用户"  :visible.sync="addDialogVisible" width="550px"  @close = "addDialogColse">
          <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
               <!-- 用户名 -->
               <el-form-item label="用户名" prop="username" >
                  <el-input v-model="addForm.username" ></el-input>
               </el-form-item>
               <!-- 昵称 -->
               <el-form-item label="昵称" prop="nickname">
                  <el-input v-model="addForm.nickname"></el-input>
               </el-form-item>
               <!-- 密码 -->
               <!-- <el-form-item label="密码" prop="password">
                  <el-input v-model="addForm.password"></el-input>
               </el-form-item> -->
               <!-- 邮箱 -->
               <el-form-item label="邮箱" prop="email">
                  <el-input v-model="addForm.email"></el-input>
               </el-form-item>
               <!-- 性别 -->
               <el-form-item label="性别" prop="gender">
                  <el-select v-model="addForm.gender" placeholder="请选择性别">
                    <el-option label="保密" value=0></el-option>
                    <el-option label="男" value=1></el-option>
                    <el-option label="女" value=2></el-option>
                    <el-option label="其他" value=3></el-option>
                  </el-select>
               </el-form-item>
               <!-- 经验 -->
               <el-form-item label="经验" prop="exp">
                  <el-select v-model="addForm.exp" placeholder="经验值">
                    <el-option label="0" value=0></el-option>
                    <el-option label="100" value=100></el-option>
                    <el-option label="200" value=200></el-option>
                  </el-select>
               </el-form-item>
               <!-- 个性签名 -->
               <el-form-item label="个性签名" prop="sign">
                  <el-input  v-model="addForm.sign" autocomplete="off"></el-input>
               </el-form-item>
               <!-- 信用值 -->
               <el-form-item label="信用值" prop="credit">
                  <el-select v-model="addForm.credit" placeholder="信用值">
                    <el-option label="0" value=0></el-option>
                    <el-option label="1000" value=1000></el-option>
                    <el-option label="2000" value=2000></el-option>
                  </el-select>
               </el-form-item>
               <!-- 省份 -->
               <el-form-item label="省份" prop="province">
                  <el-input v-model="addForm.province"></el-input>
               </el-form-item>
               <!-- 城市 -->
               <el-form-item label="城市" prop="city">
                  <el-input v-model="addForm.city"></el-input>
               </el-form-item>
               <span class="dialog-footer">
                  <el-button @click="addDialogVisible = false">取消</el-button>
                  <el-button @click="addDialogColse()">重置</el-button>
                  <el-button type="primary" @click="addUser()">提交</el-button>
              </span>              
          </el-form>
      </el-dialog>
      <!-- 编辑用户区域 -->
      <el-dialog title="编辑用户信息"  :visible.sync="editDialogVisible" width="550px"  @close = "editDialogColse">
          <el-form :model="addForm" :rules="addFormRules" ref="editFormRef" label-width="70px">
               <!-- 用户名 -->
               <el-form-item label="用户名" prop="username" >
                  <el-input v-model="addForm.username" ></el-input>
               </el-form-item>
               <!-- 昵称 -->
               <el-form-item label="昵称" prop="nickname">
                  <el-input v-model="addForm.nickname"></el-input>
               </el-form-item>
               <!-- 邮箱 -->
               <el-form-item label="邮箱" prop="email" >
                  <el-input v-model="addForm.email" ></el-input>
               </el-form-item>
               <!-- 性别 -->
               <el-form-item label="性别" prop="gender">
                  <el-select v-model="addForm.gender" placeholder="请选择性别">
                    <el-option label="保密" value=0></el-option>
                    <el-option label="男" value=1></el-option>
                    <el-option label="女" value=2></el-option>
                    <el-option label="其他" value=3></el-option>
                  </el-select>
               </el-form-item>
               <!-- 经验 -->
               <el-form-item label="经验" prop="exp">
                  <el-select v-model="addForm.exp" placeholder="经验值">
                    <el-option label="0" value=0></el-option>
                    <el-option label="100" value=100></el-option>
                    <el-option label="200" value=200></el-option>
                  </el-select>
               </el-form-item>
               <!-- 个性签名 -->
               <el-form-item label="个性签名" prop="sign">
                  <el-input  v-model="addForm.sign" autocomplete="off"></el-input>
               </el-form-item>
               <!-- 信用值 -->
               <el-form-item label="信用值" prop="credit">
                  <el-select v-model="addForm.credit" placeholder="信用值">
                    <el-option label="0" value=0></el-option>
                    <el-option label="1000" value=1000></el-option>
                    <el-option label="2000" value=2000></el-option>
                  </el-select>
               </el-form-item>
               <!-- 省份 -->
               <el-form-item label="省份" prop="province">
                  <el-input v-model="addForm.province"></el-input>
               </el-form-item>
               <!-- 城市 -->
               <el-form-item label="城市" prop="city">
                  <el-input v-model="addForm.city"></el-input>
               </el-form-item>
               <span class="dialog-footer">
                  <el-button @click="editDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="editUser()">提交</el-button>
              </span>              
          </el-form>
      </el-dialog>

  </div>
</template>

<script>
import * as API from '@/api/user/user.js'
export default {
    created(){
      this.getAllUser();
    },
    data(){
      return{
          //查询信息实体
          queryDTO:{
            pageNo:1,//当前页
            pageSize:5,//每页最大数
            keyword:"",//查询的用户名
          },
          total:0,//总记录数
          userlist:[],//用户列表
          //button状态
          isDisable:false,
          //账户或邮箱状态转文字
          stateNum:"",
          //编辑用户信息对话框状态
          editDialogVisible:false,
          //添加用户对话框状态
          addDialogVisible:false,
          //删除操作的对话框
          visible: false,
          //多选框
          multipleSelection:[],
          list:[],
          //添加表单信息
          addForm:{
            uid:0,
            username:'',
            nickname:'',
            password:'',
            email:'',
            exp:'',//经验
            sign:'',//个性签名
            gender:'',//性别
            credit:'',//信用值
            province:'',
            city:'',
          },
          //表单验证
          addFormRules:{
              username: [
                { required: true, message: '用户名', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
              ],
              nickname: [
                { required: true, message: '昵称', trigger: 'blur' },
                { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
              ],
              email: [
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
              ],
              gender: [
                { required: false, message: '性别,0:保密 1：男 2：女 3：其他', trigger: 'blur' },
              ],
              exp: [
                { required: false},
              ],
              sign: [
                { required: false, message: '个性签名', trigger: 'blur' },
                { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
              ],
              credit: [
                { required: false, message: '信用值', trigger: 'blur' },
              ],
              province: [
                { required: false, message: '省份', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
              ],
              city: [
                { required: false, message: '城市', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
              ],
              
          },

      }
    },
    methods:{
      
      //刷新,加限制点击,几秒内不能重复点击
      refresh(){
          this.isDisable = true,
          this.getAllUser();
          setTimeout(()=>{this.isDisable = false},1000);
      },
      //获取所有用户
      getAllUser(){
          //发送请求
          // console.log(this.queryDTO)
          // return;
          API.GetUser(this.queryDTO).then((res) => {
            if(res.data.code==200){
              this.userlist = res.data.data.records;
              this.total = res.data.data.total;
            }else{
              this.$message.error(res.data.message);
              if(res.data.message=="用户令牌异常"){
                  //清除session
                  window.sessionStorage.clear();
                  //回到登录页面
                  this.$router.push("/login");
                  //提示要退到登录页面
                  this.$message({
                    type: 'warning',
                    message: '返回登录页面!'
                  });
                  this.$router.push('/login');
              }
            }
          })  
      },
      //最大数
      handleSizeChange(newSize){
          this.queryDTO.pageSize = newSize;
          this.getAllUser();
      },
      //pageNo的触发功能
      handleCurrentChange(newPage){
        this.queryDTO.pageNo = newPage;
        this.getAllUser() ;
      },
      //修改状态
      setState(userlist){
        if(userlist.state == 0){
           this.stateNum = "封禁";
           userlist.state= 1;
        }else{
          this.stateNum = "解封";
          userlist.state = 0;
        }    
        this.$confirm(this.stateNum, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          API.AlterUserState(userlist).then((res) =>{
              if(res.data.code==200){
                  this.$message.success(this.stateNum+"成功");
              }else{
                this.$message.success("修改失败");
              }
          })         
        }).catch(() => {
          this.refresh();
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      },
      //修改邮箱状态
      setemailState(userlist){
        if(userlist.verified == 0){
            this.stateNum = "激活";
            userlist.verified = 1;
        }else{
          this.stateNum = "取消激活";
          userlist.verified = 0;
        }  
        this.$confirm(this.stateNum, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          API.AlterMailState(userlist).then((res) =>{
              if(res.data.code==200){
                  this.$message.success(this.stateNum+"成功");
              }else{
                this.$message.success("修改失败");
              }
          })         
        }).catch(() => {
          this.refresh();
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      },
      //清除addForm表单的数据
      addDialogColse(){
          this.$nextTick(()=>{
            this.$refs['addFormRef'].resetFields();
          });
      },
      editDialogColse(){
        this.addForm.uid = '';
        this.addForm.username = '';
        this.addForm.nickname = '';
        this.addForm.password = '';
        this.addForm.email = '';
        this.addForm.exp = '';
        this.addForm.sign = '';
        this.addForm.gender = '';
        this.addForm.credit = '';
        this.addForm.province = '';
        this.addForm.city = '';
      },
      //添加用户
      addUser(){
        this.$refs.addFormRef.validate(valid =>{
          if(valid){
            API.AddUser(this.addForm).then((res) =>{
            // console.log(res)
            if(res.data.code==200){
              this.$notify({
                title: '成功',
                message: res.data.data.username+'用户添加成功,初始密码为'+res.data.data.password+'，可进行重置',
                type: 'success',
                duration: 20000
              });
              this.addDialogVisible = false;
              this.getAllUser();
            }else{
              this.$notify.error({
                title: '警告',
                message: res.data.message,
                duration: 6000
              });
            }
          })
          }else{
            this.$notify.error({
              title: '错误',
              message: '数据格式错误',
              duration: 6000
            });
          }   
        })
      },
      //删除用户(数据库删除)
      deleteUser(userlist){
          this.$confirm('此操作将永久删除该用户, 是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
             API.DeleteUser(userlist).then((res) =>{
            if(res.data.code==200){
              this.$notify({
                title: '成功',
                message: res.data.data.username+'用户被移入删除表',
                type: 'success',
                duration: 6000
              });
              this.getAllUser();
            }else{
              this.$notify.error({
                title: '警告',
                message: res.data.message,
                duration: 6000
              });
            }
          })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      //删除用户(标记删除))
      tagsdeleted(){
          this.$notify.error({
                title: '提示',
                message: "该功能还未开发",
                duration: 6000
          });
      },
      //编辑用户信息
      editUserInfo(user){
        //显示对话框
        this.addForm.uid = user.uid;
        this.addForm.username = user.username;
        this.addForm.nickname = user.nickname;
        this.addForm.password = user.password;
        this.addForm.email = user.email;
        this.addForm.exp = user.exp;
        this.addForm.sign = user.sign;
        this.addForm.gender = user.gender;
        this.addForm.credit = user.credit;
        this.addForm.province = user.province;
        this.addForm.city = user.city;
        this.editDialogVisible = true;
      },
      //编辑用户信息
      editUser(){
           this.$refs.editFormRef.validate(valid =>{
              if(valid){
             API.EditUser(this.addForm).then((res) =>{
            if(res.data.code==200){
              this.$notify({
                title: '成功',
                message: this.addForm.username+'用户信息修改成功',
                type: 'success',
                duration: 6000
              });
              this.editDialogVisible= false;
              //刷新页面
              this.getAllUser();
            }else{
              this.$notify.error({
                title: '警告',
                message: res.data.message,
                duration: 6000
              });
            }
          })
          }else{
                this.$notify.error({
                title: '错误',
                message: '数据格式错误',
                duration: 6000
              });
              }
           });
      },
      //多选框的绑定值
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //批量删除
      batchDelete(){
        this.$confirm('此操作将永久删除用户, 是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            //获取要删除的uid
            var i = 0 ;
            this.multipleSelection.forEach(item=>{
                  this.list[i] = item.uid;
                  i++;
            });
            API.MdeleteUser(this.list).then((res)=>{
            if(res.data.code==200){
                this.$notify({
                  title: '成功',
                  message: res.data.message,
                  type: 'success',
                  duration: 6000
                });
                this.getAllUser();
            }else{
                this.$notify.error({
                  title: '错误',
                  message: res.data.message,
                  duration: 6000
                });
                this.getAllUser();
            }
          })
        });
      },
      //批量标记删除
      batchTagDelete(){
        this.$notify.error({
          title: '错误',
          message: "该功能未开发,有需要的联系管理员~~",
          duration: 6000
        });
      },
      //重置密码
      resetpassword(userlist){
          this.$confirm('此操作将重置用户密码, 是否继续?', '警告', {
            confirmButtonText: '重置',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            API.Resetpwd(userlist).then((res)=>{
            if(res.data.code==200){
                this.$notify({
                  title: '成功',
                  message: userlist.username+"密码重置为"+res.data.data,
                  type: 'success',
                  duration: 20000,
                });
                this.getAllUser();
            }else{
                this.$notify.error({
                  title: '错误',
                  message: res.data.message,
                  duration: 6000
                });
                this.getAllUser();
            }
          })
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
      },
      

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
  margin-left: 42%;
}
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 15px;
}
/* dialog-footer */
.dialog-footer{
    margin-left: 50%;
}
/* 批量删除 */
.mdelete{
  margin-top: 10px;
}
</style>
